<template>
  <div>
    <Student />
    <hr />
    <ul>
      <button @click="forward">前进</button>
      <button @click="back">后退</button>
      <button @click="pushShow">首页</button>
      <button @click="replaceShow">详情</button>
      <hr />
      <!-- 缓存了Home路由组件 -->
      <keep-alive :include="['Home']">
        <router-view></router-view>
      </keep-alive>
    </ul>
  </div>
</template>

<script>
import Student from "./components/Student";
export default {
  name: "App",
  components: { Student },
  methods: {
    pushShow() {
      this.$router.push({
        name: "jia",
      });
    },
    replaceShow() {
      this.$router.replace({
        name: "xiangqing",
      });
    },

    back() {
      this.$router.back();
    },
    forward() {
      this.$router.forward();
    },
  },
};
</script>
